<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>扫一扫</title>
    <!-- Bootstrap CSS -->
    <link href="/bootstrap.min.css" rel="stylesheet">
    <style>

    </style>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p style="text-align: center;">扫一扫</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="qr-reader"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <button class="btn btn-primary btn-lg d-none" onclick="startScan()">开始</button>
                <button class="btn btn-primary btn-lg d-none" onclick="stopScan()">停止</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="qr-reader-results"></div>
            </div>
        </div>
    </div>

</body>
<script src="/html5-qrcode.min.js"></script>
<script>
    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete"
            || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    const html5QrCode = new Html5Qrcode("qr-reader");

    docReady(function () {
        // var resultContainer = document.getElementById('qr-reader-results');
        var lastResult, countResults = 0;
        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                printScanResultPretty(countResults, decodedText, decodedResult);
                ++countResults;
                lastResult = decodedText;
                // Handle on success condition with the decoded message.
                console.log(`Scan result ${decodedText}`, decodedResult);
            }
        }

        // var html5QrcodeScanner = new Html5QrcodeScanner(
        //     "qr-reader", { fps: 10, qrbox: 250 });
        // html5QrcodeScanner.render(onScanSuccess);

        const config = { fps: 10, qrbox: { width: 250, height: 250 } };

        // If you want to prefer front camera
        // html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

        // If you want to prefer back camera
        // html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess);

        // Select front camera or fail with `OverconstrainedError`.
        // html5QrCode.start({ facingMode: { exact: "user"} }, config, onScanSuccess);

        // Select back camera or fail with `OverconstrainedError`.
        // html5QrCode.start({ facingMode: { exact: "environment"} }, config, onScanSuccess);

    });

    function onScanSuccess(decodedText, decodedResult) {
        if (decodedText !== lastResult) {
            printScanResultPretty(countResults, decodedText, decodedResult);
            ++countResults;
            lastResult = decodedText;
            // Handle on success condition with the decoded message.
            console.log(`Scan result ${decodedText}`, decodedResult);
        }
    }

    function startScan(){
        const config = { fps: 10, qrbox: { width: 250, height: 250 } };
        html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess);
    }

    function stopScan(){
        html5QrCode.stop();
    }

    /** Ugly function to write the results to a table dynamically. */
    function printScanResultPretty(codeId, decodedText, decodedResult) {
        let resultSection = document.getElementById('qr-reader-results');
        let tableBodyId = "scanned-result-table-body";
        if (!document.getElementById(tableBodyId)) {
            let table = document.createElement("table");
            table.className = "styled-table";
            table.style.width = "100%";
            resultSection.appendChild(table);
            let theader = document.createElement('thead');
            let trow = document.createElement('tr');
            let th1 = document.createElement('td');
            th1.innerText = "Count";
            let th2 = document.createElement('td');
            th2.innerText = "Format";
            let th3 = document.createElement('td');
            th3.innerText = "Result";
            trow.appendChild(th1);
            trow.appendChild(th2);
            trow.appendChild(th3);
            theader.appendChild(trow);
            table.appendChild(theader);
            let tbody = document.createElement("tbody");
            tbody.id = tableBodyId;
            table.appendChild(tbody);
        }
        let tbody = document.getElementById(tableBodyId);
        let trow = document.createElement('tr');
        let td1 = document.createElement('td');
        td1.innerText = `${codeId}`;
        let td2 = document.createElement('td');
        td2.innerText = `${decodedResult.result.format.formatName}`;
        let td3 = document.createElement('td');
        td3.innerText = `${decodedText}`;
        trow.appendChild(td1);
        trow.appendChild(td2);
        trow.appendChild(td3);
        tbody.appendChild(trow);
    }
</script>
</head>
</html>